<template>
  <div>
    <h1>开发者评估应用</h1>
    <input v-model="searchQuery" placeholder="搜索开发者..." />
    <select v-model="selectedNation">
      <option value="">所有国家</option>
      <option value="China">中国</option>
      <option value="USA">美国</option>
      <!-- 添加更多国家选项 -->
    </select>
    <button @click="fetchDevelopers">搜索</button>
    <DeveloperList :developers="developers" />
  </div>
</template>

<script>
import DeveloperList from '../components/DeveloperList.vue';
import axios from 'axios';

export default {
  name: 'Home',
  components: {
    DeveloperList,
  },
  data() {
    return {
      searchQuery: '',
      selectedNation: '',
      developers: [],
    };
  },
  methods: {
    async fetchDevelopers() {
      // 这里调用后端 API 获取开发者数据
      const response = await axios.get('/api/developers', {
        params: {
          query: this.searchQuery,
          nation: this.selectedNation,
        },
      });
      this.developers = response.data;
    },
  },
};
</script>

<style>
/* Add your styles here */
</style>